<script setup lang="ts">
import router from "@/router";
import {onMounted, reactive} from "vue";
import {HomeFilled} from "@element-plus/icons-vue";

function logout() {
  localStorage.removeItem("code_user");
  // router.push("/login");
  location.href = "/login";
}

const data = reactive({
  user: JSON.parse(localStorage.getItem("code_user") ||"{}")
})
function loginout() {
  localStorage.removeItem("code_user");
  location.href = "/login";
}

onMounted(()=>{
  if(data.user.role != 1){
    location.href = "/login";
  }
})
</script>

<template>
  <div class="body">
    <!-- 头部区域开始 -->
    <div style="height: 60px; display: flex;">
      <div style="width: 240px; display: flex; align-items: center; padding-left: 20px;">
        <img style="width: 40px; height: 40px; border-radius: 50%" src="@/assets/images/g_bg.jpg" alt="">
        <span style="font-size: 20px; font-weight: bold; color: #121212; margin-left: 5px">管理员界面</span>
      </div>
      <div style="flex: 1; display: flex; align-items: center; padding-left: 20px; border-bottom: 1px solid #ddd"/>
      <div style="width: fit-content; padding-right: 20px; display: flex; align-items: center; border-bottom: 1px solid #ddd">
        <el-dropdown>
          <div style="display: flex; align-items: center">
            <img v-if="data.user.avatar" style="width: 40px; height: 40px; border-radius: 50%" :src="`http://localhost:8080${data.user.avatar}`" alt="">
            <img v-else style="width: 40px; height: 40px; border-radius: 50%" src="@/assets/images/avatar.png" alt="">
            <span style="margin-left: 5px">{{data.user.username}}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!--  下方区域开始 -->
    <div style="display: flex">
      <!--  菜单区域开始 -->
      <div style="width: 240px;">
        <el-menu
            router :default-openeds="['0']"
            :default-active="router.currentRoute.value.path"
            style="min-height: calc(100vh - 60px)">
            <el-menu-item index="/user">
              <el-icon><UserFilled /></el-icon>
              <span>用户查询</span>
            </el-menu-item>
            <el-menu-item index="/">
              <el-icon><HomeFilled /></el-icon>
              <span>储存柜首页</span>
            </el-menu-item>
        </el-menu>

      </div>
      <!--  数据渲染区域开始 -->
      <div style="flex: 1; width: 0; padding: 10px;">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<style>
.body{
  background-image: url("../assets/images/bg_g.jpg");
  background-size: cover;
}
.el-menu {
  background-color: rgba(255, 255, 254, 0.71);
  border: none;
}
.el-sub-menu__title {
  background-color: #3a456b;
  color: #ddd;
}
.el-menu-item {
  height: 50px;
  color: #0f0f0f;
}
.el-menu .is-active {
  background-color: rgba(187, 174, 178, 0.55);
  color: #8d0303;
  font-weight: bold;
}
.el-sub-menu__title:hover {
  background-color: #3a456b;
}
.el-menu-item:not(.is-active):hover {
  background-color: #7a9fff;
  color: #333;
}
.el-dropdown {
  cursor: pointer;
}
.el-tooltip__trigger {
  outline: none;
}
.el-menu--inline .el-menu-item {
  padding-left: 48px !important;
}
</style>